﻿
<FluentAccordion ActiveId="@activeId" OnAccordionItemChange="HandleOnAccordionItemChange">
    <FluentAccordionItem Heading="Panel one">
        <FluentIcon Value="@(new Icons.Regular.Size20.Globe())" Color="@Color.Neutral" Slot="start" />
        Panel one content, using the 'start' slot for extra header content (in this case an icon)
    </FluentAccordionItem>
    <FluentAccordionItem Heading="Panel two">
        <div slot="end">
            #end#
        </div>
        Panel two content, using the 'end' slot for extra header content (in this case an HTML button)
    </FluentAccordionItem>
    <FluentAccordionItem Expanded="true" Heading="Panel three">
        Panel three content
    </FluentAccordionItem>
    <FluentAccordionItem Expanded="true">
        <HeadingTemplate>
            Panel <span style="color:red">Four</span>
        </HeadingTemplate>
        <ChildContent>
            Panel four content
        </ChildContent>
    </FluentAccordionItem>
</FluentAccordion>

<p>Last changed accordion item: @(changed?.Heading ?? "item with HeaderTemplate")</p>


@code {
    string activeId = "accordion-1";

    FluentAccordionItem? changed;

    private void HandleOnAccordionItemChange(FluentAccordionItem item)
    {
        changed = item;
    }
}